{extend name="base"/}
{block name="content"}
<!-- 内容 -->
<div class="wrapper">
    <!-- 幻灯片开始 -->
    <div class="home-slider">
        <div id="home-slider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#home-slider" data-slide-to="0" class="active"></li>
                <li data-target="#home-slider" data-slide-to="1"></li>
                <li data-target="#home-slider" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active" id="item-1">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6">
                                <h1 class="first-child animated slideInDown delay-2"><strong><span class="text-blue">强大的CMS系统</span></strong> <small>PC、手机、平板自适应</small></h1>
                                <h4 class="animated fadeInUpBig delay-4"><span>前端基于Bootstrap 3x</span></h4>
                                <h4 class="animated fadeInUpBig delay-5"><span>后台基于TPFrame 6.x</span></h4>
                                <h4 class="animated fadeInUpBig delay-6"><span>10+个前端页面供选择</span></h4>
                                <br>
                                <a class="btn-animate btn-style btn-lg btn-f btn-primary animated bounceInDown delay-6" href="https://www.tpframe.com/store.html">马上获取</a>
                            </div>
                            <div class="col-sm-6 hidden-xs"><img class="img-responsive" src="__THEMES__/img/showcase.png" alt="tcms案例 tpframe插件"></div>
                        </div>
                    </div>
                </div>
                <div class="item" id="item-2">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-7 hidden-xs">
                                <div class="boxshadow">
                                    <div class="video-container">
                                        <iframe width="620" height="350" src="https://www.tpframe.com" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <h1 class="first-child animated fadeInUpBig delay-2"><strong><span class="text-red">响应式<br/></span></strong> <small><span class="text-white">PC、手机、平板</span></small></h1>
                                <ul class="string">
                                    <li class="animated slideInDown delay-4"><span><strong>无限扩展、海量插件</strong></span></li>
                                    <li class="animated bounceInRight delay-6"><h2>快速、精简、高效、高扩展、易维护的CMS框架</h2>
                                    </li>
                                </ul>
                                <a class="btn-animate btn-style btn-lg btn-f btn-red btn-primary animated bounceInDown delay-6" href="https://www.tpframe.com/store.html">插件市场</a>
                            </div>
                        </div> 
                    </div> 
                </div>
                <div class="item" id="item-3">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-6 hidden-xs"><img class="img-responsive animated bounceInDown" src="__THEMES__/img/banner3-iphone.png" alt="主图"></div>
                            <div class="col-sm-6">
                                <h1 class="first-child animated slideInRight delay-2">100%开源<br/> <strong><span class="text-blue">自由扩展</span></strong> <small> 二开友好</small></h1>
                                <ul>
                                    <li class="animated slideInRight delay-4"><i class="fa fa-star"></i> 海量插件免费下载</li>
                                    <li class="animated slideInDown delay-4"><i class="fa fa-star"></i> 全自适应</li>
                                    <li class="animated slideInRight delay-5"><i class="fa fa-star"></i> 易于扩展</li>
                                    <li class="animated slideInRight delay-6"><i class="fa fa-star"></i> 高效运行</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-arrow carousel-arrow-prev hidden-xs hidden-sm" href="#home-slider" data-slide="prev">
              <i class="fa fa-angle-left fa-2x"></i>
            </a>
            <a class="carousel-arrow carousel-arrow-next hidden-xs hidden-sm" href="#home-slider" data-slide="next">
              <i class="fa fa-angle-right fa-2x"></i>
            </a>
        </div>
    </div>
    <!-- 幻灯片结束 -->
    <!-- 服务 -->
    <div class="home-services">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="lead">Thinkphp6升级版开源框架</h2>
                </div>
            </div> 
        </div> 
    </div>
    <!-- Divider Shadow -->
    <div class="divider-shadow">
        <img src="__THEMES__/img/divider-shadow1.png" alt="devider" class="responsive-img">
    </div>
    <!-- Main Services -->
    <div class="main-services">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="services">
                        <div class="service-item">
                            <span class="icon icon-1 icon-1c"><i class="fa fa-cogs"></i></span>
                            <div class="service-desc">
                                <h4>插件式扩展</h4>
                                <p>网站所有功能都可插件式扩展，市场丰富的插件让你节约更多的人力与物力</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="services">
                        <div class="service-item">
                            <span class="icon icon-1 icon-1c"><i class="fa fa-code"></i></span>
                            <div class="service-desc">
                                <h4>程序开源</h4>
                                <p>程序所有代码全部开源，包括核心程序，让你二次开发没有任何忧虑</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="services">
                        <div class="service-item">
                            <span class="icon icon-1 icon-1c"><i class="fa fa-plane"></i></span>
                            <div class="service-desc">
                                <h4>跨平台支持</h4>
                                <p>开发适用于PC端、微信端、API接口、小程序等，开发一个程序搞定，就是这么屌</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="services">
                        <div class="service-item">
                            <span class="icon icon-1 icon-1c"><i class="fa fa-user"></i></span>
                            <div class="service-desc">
                                <h4>强大的权限管理</h4>
                                <p>后台强大的权限管理控制，给你的团队随意分配权限，轻松解决你的烦恼</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="services">
                        <div class="service-item">
                            <span class="icon icon-1 icon-1c"><i class="fa fa-crosshairs"></i></span>
                            <div class="service-desc">
                                <h4>API无缝集成</h4>
                                <p>API接口的完美封装，简单代码就能搞定你复杂的设计，提供免费的API文档自动生成插件</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="services">
                        <div class="service-item">
                            <span class="icon icon-1 icon-1c"><i class="fa fa-random"></i></span>
                            <div class="service-desc">
                                <h4>代码低耦合</h4>
                                <p>代码之前的耦合度降至最低，杜绝搬砖式的堆代码，100%逻辑代码共用</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div> 
    </div> 
    <div class="responsive-showcase">
        <div class="container">
            <div class="responsive-design">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <h2>响应式网站设计</h2>
                        <p class="lead text-muted">
                            响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局，自动自适应各平台。tcms就是一款基于TPFrame而开发的响应式网站应用模块，网站自适应各平台帮你轻松搞定。
                        </p>
                        <ul class="col-md-12 col-sm-12 col-xs-12 list-inline">
                            <li><i class="fa fa-mobile text-blue inactive" data-device="#iphone"></i></li>
                            <li><i class="fa fa-tablet text-blue inactive" data-device="#ipad"></i></li>
                            <li><i class="fa fa-laptop text-blue" data-device="#laptop"></i></li>
                            <li><i class="fa fa-desktop text-blue inactive" data-device="#desktop"></i></li>
                        </ul>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-12 device-show">
                        <img class="img-responsive show" src="__THEMES__/img/laptop.png" alt="..." id="laptop">
                        <img class="img-responsive hidden" src="__THEMES__/img/desktop.png" alt="..." id="desktop">
                        <img class="img-responsive hidden" src="__THEMES__/img/ipad.png" alt="..." id="ipad">
                        <img class="img-responsive hidden" src="__THEMES__/img/iphone.png" alt="..." id="iphone">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="responsive-tag-banner">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <img class="img-responsive show text-center" src="__THEMES__/img/site.jpg" alt="..." style="height:100%;width:100%">
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <h2>Tcms 是你做自适应网站的最好选择</h2>
                    <p class="lead text-muted">
                        tcms 前端页面采用当前最流程的bootstrap前端框架制作，集图片、图文、商城、单页、登录、注册等各种页面为一体，解决你不同页面的功能须求问题。后端采用TPFrame 6.x最新版驱动，简洁的代码、清晰的注解、完善的文档，轻松解决你的二次开发障碍。
                    </p>
                    <p class="lead text-muted">
                        我们力争把tcms做到更好，为更多的企业提供更好的网站服务，帮企业花少量的钱就可以得到你想要的网站问题，一端代码搞定pc、H5、平板、微信等各端问题。
                    </p>
                    <a class="btn-animate btn-style btn-d btn-primary" href="https://www.tpframe.com/download.html" target="_blank">下载Tcms</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 反馈 -->
    <div class="feedbacks">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="uline-title text-center">功能板块持续更新</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="feedback">
                        <div class="icon"><i class="fa fa-crosshairs"></i></div>
                        <span><a href="javascript:;" class="title">内容板块</a></span>
                        <div>
                            <p>
                               文章图文形式呈现，适合各种内容管理系统
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="feedback">
                        <div class="icon"><i class="fa fa-picture-o"></i></div>
                        <span><a href="" class="title">图片模块</a></span>
                        <div>
                            <p>
                                图片管理系统，轻松管理相册、作品等图片
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="feedback">
                        <div class="icon"><i class="fa fa-video-camera"></i></div>
                        <span><a href="javascript:;" class="title">视频模块</a></span>
                        <div>
                            <p>
                                管理各平台视频资源，做视频站简单搞定
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="feedback">
                        <div class="icon"><i class="fa fa-user"></i></div>
                        <span><a href="" class="title">会员模块</a></span>
                        <div>
                            <p>
                                集注册、登录，个人中心，会员系统轻松接入
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feedback">
                        <div class="icon"><i class="fa fa-file"></i></div>
                        <span><a href="" class="title">单页模块</a></span>
                        <div>
                            <p>
                                标签随便调用，静态页面生成支持，制作单页、着陆页简单搞定
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feedback">
                        <div class="icon"><i class="fa fa-download"></i></div>
                        <span><a href="" class="title">下载模块</a></span>
                        <div>
                            <p>
                                下载模块管理各种文档，在线提供软件、文档、资源类下载
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="feedback">
                        <div class="icon"><i class="fa fa-magnet"></i></div>
                        <span><a href="" class="title">自动提交</a></span>
                        <div>
                            <p>
                                后台自动提交内容到百度等各大搜索引擎，原创文章优先收录
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <!-- 反馈 -->
    <div class="call-actions">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="uline-title text-center">tcms有你不喜欢的地方吗</h2>
                </div>
            </div> 
            <div class="row">
                <div class="call-action text-center">
                    <p>tcms作为一款开源产品，全方面为用户提供各种功能现成模块，通过tcms应用模块，你可以轻松建立属于你自己个性化的网站。为了做出更好的产品，我们吸取每一个用户的意见与反馈，从而更好的改进我们的产品，不求最好，力求更好，不把最好的产品，而把最适合的产品显现到你的面前。如果你有宝贵的意见，请给我们留言吧。</p>
                    <br>
                    <a class="btn-animate btn-style btn-lg btn-e btn-primary" href="mailto:mail@tpframe.com">我要留言</a>
                </div><br><br><br>
            </div>
        </div>
    </div>
    <!-- tcms 文章 -->
    <div class="blog-posts">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h2 class="uline-title text-center">tcms 文章</h2>
                </div>
            </div> 
            <div class="row">
                {volist name=':Core::loadAction("Posts/getPosts",["data"=>["where"=>["channel"=>1,"isdelete"=>0],"limit"=>3,"order"=>"updatetime desc"]])' id="vo"}
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="blog">
                        {empty name="vo.thumb"}
                        <img src="__THEMES__/img/default_post.jpg" alt="{$vo.title}">
                        {else/}
                        <img src="{$vo.thumb}" alt="{$vo.title}">
                        {/empty}
                        <div class="blog-desc">
                            <h3><a href="{:url('tcms/Posts/detail',['id'=>$vo.id])}">{$vo.title}</a></h3>
                            <hr>
                            <p class="text-muted">{$vo.source}</p>
                            <p>{$vo.abstract}</p>
                            <a class="btn-animate btn-style btn-d btn-primary" href="{:url('tcms/Posts/detail',['id'=>$vo.id])}">查看详情...</a>
                        </div>
                    </div>
                </div>
                {/volist}
            </div> 
        </div> 
    </div>
</div>
<script type="text/javascript">
$(function(){
    var myElement=document.getElementById('home-slider');
    var hm=new Hammer(myElement);
    hm.on("swipeleft",function(){
        $('#home-slider').carousel('next');
    });
    hm.on("swiperight",function(){
        $('#home-slider').carousel('prev');
    });
    $(".home-slider .carousel-inner").mousedown(function(){
        $(this).addClass("grabbing");
    }).mouseup(function(){
        $(this).removeClass("grabbing");
    });
});
$('#tooltip').tooltip();
</script>
{/block}